<template>
  <div class="home-carousel" ref="carouselRef">
    <!-- http://test.lianghj.top/picture/bg/78888804_p0.png?x-oss-process=style/mystyle -->
    <el-carousel :interval="6000" :pause-on-hover="false">
      <el-carousel-item>
        <img
          class="swiper"
          src="http://test.lianghj.top/picture/bg/78888804_p0.png?x-oss-process=style/mystyle"
          alt=""
        />
        <div class="content">
          <div class="content-title">唯有学习 才能进步</div>
          <div class="content-desc">与其临渊羡鱼，不如退而结网</div>
          <UserShareInfoCard></UserShareInfoCard>
          <div class="content-read" @click="moveClick">
            <i class="iconfont icon-shousuoxiajiantou"></i> 开始阅读
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item v-for="(item, index) in carousel" :key="index">
        <img v-lazy="item.cover" class="swiper" alt="" />
        <div class="content" @click.self="moveClick">
          <div class="content-title">{{ item.title }}</div>
          <div class="content-desc">{{ item.desc }}</div>
          <div
            class="content-read"
            @click.self="router.push(`/readview?id=${item.id}&uid=${item.uid}`)"
          >
            <img v-lazy="read" style="width: 20px; height: 20px" /> 点击阅读
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getAllArticleService } from "@/service/article";
import router from "@/router";
import { IArticle } from "@/store";

import UserShareInfoCard from "@/components/UserShareCard/UserShareCard.vue";

import read from "@/assets/img/read.svg";
const route = useRoute();
const carousel = ref<IArticle[]>([]);
const carouselRef = ref<HTMLDivElement>();
const moveClick = () => {
  let timer: any;
  timer = setInterval(() => {
    let top = document.documentElement.scrollTop;
    document.documentElement.scrollTop = +top + 50;
    if (top >= carouselRef.value!.clientHeight - 120) {
      clearInterval(timer);
    }
  }, 20);
};
onMounted(async () => {
  if (route.path === "/") {
    const res: any = await getAllArticleService(1, 0, 5);
    carousel.value = res.data.articles;
  }
});
</script>

<style lang="less" scoped>
.home-carousel {
  position: relative;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  border: 0;
  background-color: #ccc;
  .swiper {
    width: 100%;
  }
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 10;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    &-title {
      width: 100%;
      font-weight: 600;
      margin: 10px 0;
      font-size: 24px;
    }
    &-desc {
      width: 100%;
      font-size: 18px;
    }

    &-read {
      width: auto;
      padding: 10px 25px;
      margin-top: 30px;
      border-radius: 20px;
      border: 1px solid #ccc;
      cursor: pointer;
      transition: all 0.3s linear;
      text-align: left;
      &:hover {
        background-color: #1989fa;
      }
      img {
        vertical-align: bottom;
      }
    }
  }
  :deep(.el-carousel) {
    height: 100% !important;
    border: 0;
  }
  :deep(.el-carousel__container) {
    height: 100% !important;
  }
  :deep(.el-carousel__indicators) {
    display: none;
  }
  :deep(.el-carousel__arrow) {
    background-color: rgba(0, 0, 0, 0.4);
  }
}
</style>
